<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>
                <input type="checkbox" name="check" id="checkAll">全选
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" id="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" id="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" id="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>
    
</body>
</html>
<script>
    // 需求1 :全选勾选或取消勾选时，小选框全部跟随   click  和  change  效果一样
    let radio = document.querySelectorAll('#ck')
    let selectAll = document.querySelector('#checkAll')
    selectAll.addEventListener('click',function(){
        console.log(this.checked)

        // if(this.checked){
        //      radio.forEach(item => item.checked = true)
        // }else{
        //     radio.forEach(item => item.checked = false)
        // }

        // 优化
        radio.forEach(item => item.checked = this.checked)
    })
    
    // 需求2  ：小选框全部选中时，全选框勾选，只要有一个小选框没有选中，则全选框不勾选
    radio.forEach( item =>{
        item.addEventListener('change',function(){
            // 判断小选框是否都被勾选了
            console.log(radio)
            // 伪数组转真数组 在使用  every
            // let result = Array.from(radio).every(item => item.checked === true)
            // console.log(result)
            // selectAll.checked = result

            // 优化：
            // selectAll.checked = Array.from(radio).every(item => item.checked === true)

            // 优化：checked  只有两种值  true 和  false
            selectAll.checked = Array.from(radio).every(item => item.checked)
        })
    })
</script>